<template>
    <div class="administratorManage">
        <h2 class="my-big-font">管理员管理</h2>
        <div class="administratorManage-content">
            <div class="content-search">
                <div class="search-l">
                    <input type="text" placeholder="用户昵称" v-model="searchUnameData">
                    <span @click="searchuserData">搜索</span>
                </div>
                <span class="search-r" @click="gosystemSettings">+新增管理员</span>
            </div>
            <div class="table-box">
                <table style="width: 100%;margin-top:20px;">
                    <tr class="titleTr">
                        <td>用户昵称</td>
                        <td>手机号码</td>
                        <td>状态</td>
                        <td>创建时间</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="p,i of userData" :key="i">
                        <td>{{p.name}}</td>
                        <td>{{p.phone}}</td>
                        <td>{{p.state==1?'启用':'禁用'}}</td>
                        <td>{{format(p.createTime)}}</td>
                        <td class="operate">
                            <el-button type="text" @click="openWindow1(p.state,i)">{{p.state==0?'启用':'禁用'}}</el-button>
                            <el-button type="text" @click="openWindow2(p.id)">修改密码</el-button>
                            <el-button type="text" @click="openWindow3(p.id,i)">删除</el-button>
                        </td>
                    </tr>
                </table>
                <el-pagination  @current-change="handleCurrentChange"  background layout="prev, pager, next" :page-count=pageCount></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import index from './index.vue'
export default {
  components: { index },
    data(){
        return{
            searchUnameData:'',//搜索用户昵称
            userData:[
                {
                    id:'',
                    name:'',
                    phone:'',
                    state:'',
                    password:'',
                    createTime:'',
                }
            ],
            checkednum:false,
            errornum:'',
            upwd1:'',
            upwd2:'',
            // 分页
            pageNum:6,//每页6条
            pageCount:null,//一共几页
            currentPage:'',//当前页码
        }
    },
    mounted(){
        this.currentPage=1
        this.getuserData()
        
    },
    methods:{
        gosystemSettings(){
            this.$router.push('/index/systemSettings')
        },
       /* searchUnameClick(){
            this.axios.post("",{searchUnameData:this.searchUnameData,page:n,pageNum:this.pageNum}).then(result=>{
                this.userData=result.data;
            })
        },*/
        //分页
        handleCurrentChange(page) {
            this.currentPage=page
            this.getuserData()
        },
        searchuserData(){
            this.currentPage=1
            this.getuserData()
        },
        //获取充值数据
        getuserData(){
            this.axios.post('/recharge/sys/user/list?limit='+this.pageNum+'&page='+this.currentPage+'&name='+this.searchUnameData).then(result=>{
                this.userData=result.data.data;
                this.pageCount = Math.ceil(result.data.count/this.pageNum);
            })
        },
        //禁用启用弹窗
        openWindow1(state,i) {
            if(state){//启用->禁用
                this.$confirm(`您确定禁用 ${this.userData[i].name} ,手机号 ${this.userData[i].phone} 的账户吗? 禁用后该用户则不可使用该手机号密码登录本系统`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.userData[i].state=0
                    this.axios.post('/recharge/sys/user/update',this.userData[i]).then(res=>{

                    })
                    this.$message({
                        type: 'success',
                        message: '禁用!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消'
                    });          
                });
            }else{
                this.$confirm(`您确定启用 ${this.userData[i].name} ,手机号 ${this.userData[i].phone} 的账户吗? `, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.userData[i].state=1
                    this.axios.post('/recharge/sys/user/update',this.userData[i]).then(res=>{

                    })
                    this.$message({
                        type: 'success',
                        message: '启用!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消'
                    });          
                });
            }
            
        },
        //修改密码弹窗
        openWindow2(id){
            var id=id
            this.$alert(
                '<div><div class="inpupwd1" style="margin-bottom:10px;display: flex;"><span class="open-span">请输入新的登录密码</span><input class="inputopen1" style="padding-left:10px;height:35px;" type="password"><div><span class="span-r" style="color:green;font-weight:800;display:none;">√</span><span class="span-e" style="color:red;font-weight:800;display:none;">×</span></div></div><div class="inpupwd2" style="margin-bottom:10px;display: flex;"><span class="open-span">再次输入登录密码</span><input class="inputopen2" style="padding-left:10px;height:35px;" type="password"><div><span class="span-r" style="color:green;font-weight:800;display:none;">√</span><span class="span-e" style="color:red;font-weight:800;display:none;">×</span></div></div></div>',
                '修改密码', 
                {dangerouslyUseHTMLString: true}).then(() => {
                     var imgr1=document.querySelector('.inpupwd1 .span-r')
                    var imge1=document.querySelector('.inpupwd1 .span-e')
                    var imgr2=document.querySelector('.inpupwd2 .span-r')
                    var imge2=document.querySelector('.inpupwd2 .span-e')
                    imge1.style.display='none'
                    imge2.style.display='none'
                    imgr1.style.display='none'
                    imgr2.style.display='none'
                    if(this.upwd1){
                        document.querySelector('.inputopen1').value=''
                        this.upwd1=''
                    }
                    if(this.upwd2){
                        document.querySelector('.inputopen2').value=''
                        this.upwd2=''
                    }
                    
                })
                setTimeout(() => {
                    document.querySelector('.inputopen1').onblur=()=>{
                        this.upwd1=document.querySelector('.inputopen1').value
                        var reg=/^[a-zA-Z0-9]{4,10}$/;
                        var imgr1=document.querySelector('.inpupwd1 .span-r')
                        var imge1=document.querySelector('.inpupwd1 .span-e')
                        console.log(imgr1.style.display,imge1.style.display)
                        if(reg.test(this.upwd1)==false){
                            imgr1.style.display='none'
                            imge1.style.display='block'
                        }else{
                            imge1.style.display='none'
                            imgr1.style.display='block'
                        }
                    }
                    document.querySelector('.inputopen2').onblur=()=>{
                        this.upwd1=document.querySelector('.inputopen1').value
                        this.upwd2=document.querySelector('.inputopen2').value
                        var imgr2=document.querySelector('.inpupwd2 .span-r')
                        var imge2=document.querySelector('.inpupwd2 .span-e')
                        imge2.style.display='none'
                        imgr2.style.display='block'
                        if(this.upwd1==''){
                            this.$message({
                                type: 'info',
                                message: '请输入密码!'
                            });
                        }else if(this.upwd1==this.upwd2){
                            this.axios.post("/recharge/sys/user/updatePsw?id="+id+'&password='+this.upwd1).then(result=>{
                              console.log("-------"+result)
                                if('成功'){
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功!'
                                    });
                                }else{
                                    this.$message({
                                        type: 'info',
                                        message: '修改失败!'
                                    });
                                }
                            })
                        }else{
                            this.$message({
                                type: 'info',
                                message: '请输入相同的密码!'
                            });
                        }
                    }
                }, 100);
                    
        },
        //删除弹窗
        openWindow3(id,i) {
            this.$confirm
            (`您确定删除 ${this.userData[i].name} ,手机号 ${this.userData[i].phone} 的账户吗? 删除后该用户则不可使用该手机号密码登录本系统`, '删除', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.axios.post('/recharge/sys/user/delete/'+id).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    this.currentPage=1
                    this.getuserData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消'
                });          
            });
        },
      //处理时间戳
      format(shijianchuo) {
        if(shijianchuo){
          var time = new Date(parseInt(shijianchuo)*1000);
          var y = time.getFullYear();
          var m = time.getMonth() + 1;
          var d = time.getDate();
          var h = time.getHours();
          var f = time.getMinutes();
          var s = time.getSeconds();
          //想要什么格式可以自己改
          // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
          return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
        }
      },
      //小于10的时候，前边加0（08：08：12）
      add0(m) {
        return m < 10 ? '0' + m : m
      },
    },
    watch:{
        
    }
}
</script>
<style scoped>
.administratorManage{
    padding: 30px 82px 50px 30px;
    background: #fff;
    margin: 10px 0 0 10px;
    color: #333333;
    min-height: calc(100vh - 96px);
    position: relative;
}
.administratorManage h2{
    padding-top: 0;
}
/* 搜索 */
.content-search{
    display: flex;
    justify-content: space-between;
}
.search-l input{
    width: 240px;
    height: 35px;
    font-size: 15px;
    padding-left: 8px;
    border: 1px solid #eee;
}
.search-l span{
    display: inline-block;
    width: 80px;
    height: 34px;
    line-height: 34px;
    border: 1px solid #ddd;
    text-align: center;
    margin-left: 10px;
    border-radius: 2px;
    font-size: 15px;
}
.search-r{
    display: inline-block;
    width: 115px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 5px;
    font-size: 15px;
    background: rgb(87, 167, 253);
    color: #fff;
}
/* 表格 */
.table-box{
    padding-top: 20px;
}
.table-bottom{
    display: flex;
    justify-content: space-between;
    color: #444;
    font-size: 14px;
    margin-top: 15px;
}
table .titleTr{
    background:rgba(246, 246, 246, 1);
}
table tr{
    border: .5px solid #eee;
}
table td{
    padding: 10px 5px;
    text-align: center;
    min-width: 60px;
    color: #555;
    font-size: 15px;
}
.operate{
    width: 230px;
}
.operate span{
    display: inline-block;
    padding:0 10px;
}
.operate span:hover{
    color:rgb(87, 167, 253) ;
}
.el-button--text{
    color: #333333;
}
button:focus {
    outline: 0 dotted;
    outline: 0 auto -webkit-focus-ring-color!important;
}

</style>
<style>
/* 弹窗 */
.el-message-box__message .open-span{
    display: inline-block;
    width: 140px;
}
</style>